<template>
    <div class="swpbox">
        <swiper :slides-per-view="1" :space-between="50" navigation @swiper="onSwiper" @slideChange="onSlideChange" :modules="[Navigation]">
            <swiper-slide>
                <ul class="tqlist">
                    <template v-for="(dt,index) in lists" :key="index">
                        <li v-if="index<8">
                            <div class="main">
                                <div class="fx">
                                    <i :class="`qi-${dt.icon}`"></i>
                                </div>
                                <p>{{dt.text}}</p>
                                <p>{{dt.temp}}° C</p>
                                <p>{{dt.humidity}}%</p>
                                <p>{{dt.windDir}}{{dt.windScale}}级</p>
                            </div>
                            <div class="time">{{dataToHHmm(dt.fxTime)}}</div>
                        </li>
                    </template>
                </ul>
            </swiper-slide>
            <swiper-slide>
                <ul class="tqlist">
                    <template v-for="(dt,index) in lists" :key="index">
                        <li v-if="index>=8 && index<16">
                            <div class="main">
                                <div class="fx">
                                    <i :class="`qi-${dt.icon}`"></i>
                                </div>
                                <p>{{dt.text}}</p>
                                <p>{{dt.temp}}° C</p>
                                <p>{{dt.humidity}}%</p>
                                <p>{{dt.windDir}}{{dt.windScale}}级</p>
                            </div>
                            <div class="time">{{dataToHHmm(dt.fxTime)}}</div>
                        </li>
                    </template>
                </ul>
            </swiper-slide>
            <swiper-slide>
                <ul class="tqlist">
                    <template v-for="(dt,index) in lists" :key="index">
                        <li v-if="index>=16">
                            <div class="main">
                                <div class="fx">
                                    <i :class="`qi-${dt.icon}`"></i>
                                </div>
                                <p>{{dt.text}}</p>
                                <p>{{dt.temp}}° C</p>
                                <p>{{dt.humidity}}%</p>
                                <p>{{dt.windDir}}{{dt.windScale}}级</p>
                            </div>
                            <div class="time">{{dataToHHmm(dt.fxTime)}}</div>
                        </li>
                    </template>
                </ul>
            </swiper-slide>
        </swiper>
    </div>
    
</template>
<script setup>
import {ref,onMounted,watch} from "vue"
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import {getHourWeather} from '@/api/plant'
import { useFramStore } from '@/pinia/modules/farm'
import {dataToHHmm} from '@/utils/format'

const framStore = useFramStore()

const lists = ref('')
let swiperObj = ''

onMounted(()=>{
    get_hour_weather()
})
watch(()=>framStore.weacherFarmItem,(n,o)=>{
    if(swiperObj) {
        swiperObj.slideTo(0)//切换到第一个slide，
    }
    get_hour_weather()
})
const get_hour_weather = async ()=>{
    const res = await getHourWeather('h24',`${framStore.weacherFarmItem.locationLongitude},${framStore.weacherFarmItem.locationLatitude}`)
    lists.value = res.hourly
}
const onSwiper = (swiper) => {
    swiperObj = swiper
};
const onSlideChange = () => {
    console.log('slide change');
};
</script>
<style lang="scss">
    .swpbox{
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        background-color: #f8f9f9;
        border: 1px solid #eef0ef;
        .tqlist{
            box-sizing: border-box;
            display: flex;
            width: 100%;
            padding: 6px 50px;
            overflow: hidden;
            li{
                box-sizing: border-box;
                //height: 200px;
                flex: 1;
                line-height: 26px;
                padding: 10px 0 0 0;
                &+li{
                   .main{
                        border-left: 1px dashed #999; 
                   } 
                }
                .main{
                    text-align: center;  
                    
                    .fx{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        i{
                            line-height: normal;
                            font-size: 18px;
                        }
                    }
                }
                .time{
                    text-align: center;
                }
            }
        }
        .swiper-button-prev:after,.swiper-button-next:after{
            font-size: 20px;
            color: #333;
        }
    }
</style>